.page {
  position: relative;
  .box {
    width: 100%;
    height: px(280);
  }

  .avatar {
    width: px(160);
    height: px(160);
    background: rgba(0, 0, 0, 0.4);
    border-radius: px(80);
    border: px(4) solid #FF445E;
  }

  .content {
    position: absolute;
    top: px(33);
    left: 5%;
    width: 90%;
    background: linear-gradient(180deg, #EBF0FE 0%, #FFFFFF 100%);
    border-radius: px(10);
    z-index: 1;
  }

  .encode {
    width: px(160);
    height: px(160);
  }

  .reflesh {
    padding: px(6) px(35);
    font-size: px(14);
    font-weight: 500;
    color: #FF445E;
    border-radius: px(2);
    border: px(1) solid #FF445E;
  }

	.color-blue {
    color:#3784F8;
  }
  
  .dirver {
    width: 100%;
    height: px(1);
    border-bottom: px(1) dashed #FF445E;
  }

  .loadEffect {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		width: 100px;
		height: 100px;
	}

	.loadEffect span {
		display: inline-block;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: #48a5f4;
		position: absolute;
    // animation: load 1.04s ease infinite; 
		-webkit-animation: load 1.04s ease infinite;
	}

	@-webkit-keyframes load {
		0% {
			opacity: 1;
      background-color: #000 !important;
		}

		100% {
			opacity: 0.2;
      background-color: #000 !important;
		}
	}

	.loadEffect span:nth-child(1) {
		left: 0;
		top: 50%;
		margin-top: px(-8);
		-webkit-animation-delay: 0.13s;
	}

	.loadEffect span:nth-child(2) {
		left: px(14);
		top: px(14);
		-webkit-animation-delay: 0.26s;
	}

	.loadEffect span:nth-child(3) {
		left: 50%;
		top: 0;
		margin-left: px(-8);
		-webkit-animation-delay: 0.39s;
	}

	.loadEffect span:nth-child(4) {
		top: px(14);
		right: px(14);
		-webkit-animation-delay: 0.52s;
	}

	.loadEffect span:nth-child(5) {
		right: 0;
		top: 50%;
		margin-top: px(-8);
		-webkit-animation-delay: 0.65s;
	}

	.loadEffect span:nth-child(6) {
		right: px(14);
		bottom: px(14);
		-webkit-animation-delay: 0.78s;
	}

	.loadEffect span:nth-child(7) {
		bottom: 0;
		left: 50%;
		margin-left: px(-8);
		-webkit-animation-delay: 0.91s;
	}

	.loadEffect span:nth-child(8) {
		bottom: px(14);
		left: px(14);
		-webkit-animation-delay: 1.04s;
	}

  .login_avatar_txt {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: px(160);
		height: px(160);
		font-size: px(16);
		color: #fff;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.3);
	}

  .ml-15 {
    margin-left: px(15);
  }

  .mr-15 {
    margin-right: px(15);
  }

  .mt-15 {
    margin-top: px(15);
  }

  .mt-30 {
    margin-top: px(30);
  }

  .mb-30 {
    margin-bottom: px(30);
  }
}
